<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>12306 模仿界面 vip</title>
    <link rel="stylesheet" href="iconfont/iconfont.css">
    <link rel="stylesheet" href="css/vip.css">
</head>
<body>
<header class="header">
    <h2>铁路会员</h2>
    <h3>会员须知</h3>
</header>
<div class="wrapper">
    <div class="vip">
       <div class="vip1">
           <div class="vip1left">
               <div class="vip1lefticon1"><i class="i mingcute:vip-1-line"></i></div>
               <h2>二星会员</h2>
               <div class="vip1lefticon2"><i class="i material-symbols:arrow-forward-ios-rounded"></i></div>
           </div>
           <div class="vip1right">
               <div class="vip1righticon"><i class="i ic:outline-person-outline"></i></div>
               <p>受让人</p>
           </div>
       </div>
        <div class="vip2">
           <p>1663乘车积分将于13日后到期</p>
        </div>
        <div class="vip3">
            <p>升级三星会员还需36685乘车积分</p>
        </div>
        <div class="vip4">
            <div class="vip4left">
               <h3>13315</h3>
                <p>乘车积分</p>
            </div>
            <p style="color: white">|</p>
            <div class="vip4right">
                <div class="vip4righttop">
                    <h3>0</h3>
                    <div class="vip4righttopicon">兑换餐饮</div>
                </div>
                <p>订餐积分</p>
            </div>
        </div>
    </div>
    <div class="vipqy">
        <em>会员权益</em>
        <img src="image/会员权益.jpg">

    </div>
    <div class="vipjc">
       <h3>精彩会员活动</h3>
       <img src="image/精彩会员活动.jpg">

    </div>
    <div class="question">
        <div class="questiontop">
            <h3>常见问题</h3>
            <div class="questiontopright">
                <i class="i material-symbols:change-circle-outline"></i>
                <p>换一换</p>
            </div>
        </div>
        <div class="questionlist">
            <p>铁路畅行常旅客会员乘车积分有遗漏怎么办</p>
            <i class="i material-symbols:arrow-forward-ios-rounded"></i>
        </div>
        <div class="questionlist">
            <p>如何查询铁路畅行常旅客会员积分遗漏补登结果</p>
            <i class="i material-symbols:arrow-forward-ios-rounded"></i>
        </div>
        <div class="questionlist">
            <p>积分可兑换哪些产品或服务</p>
            <i class="i material-symbols:arrow-forward-ios-rounded"></i>
        </div>
        <div class="questionlist">
            <p>铁路畅行常旅客会员乘车积分如何获得</p>
            <i class="i material-symbols:arrow-forward-ios-rounded"></i>
        </div>

    </div>

    <div class="vipsc">
        <p>会员手册</p>
    </div>

</div>

<!--底部菜单部分-->
<ul class="footer">
    <li onclick="location.href='home_page.html'">
        <i class="i ion:md-train"></i>
        <p>首页</p>
    </li>
    <li onclick="location.href='mobility_service.html'">
        <i class="i material-symbols:checked-bag-outline"></i>
        <p>出行服务</p>
    </li>
    <li onclick="location.href='order.html'">
        <i class="i solar:document-outline"></i>
        <p>订单</p>
    </li>
    <li onclick="location.href='vip.html'">
        <i class="i mingcute:vip-1-line" style="color: #3c97f9"></i>
        <p style="color: #3c97f9">铁路会员</p>
    </li>
    <li onclick="location.href='myself.html'">
        <i class="i ic:outline-person-outline"></i>
        <p>我的</p>
    </li>
</ul>
</body>
</html>